import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Helmet, history } from 'umi';
import { Badge, Space, Button, DemoBlock, Dialog } from 'antd-mobile';

export default () => {
  const [data, setData] = useState([]);
  const [data2, setData2] = useState([]);

  useEffect(() => {
    var data = [
      {
        img: require('./img/Group 4 (3).png'),
        title: '软通动力：做有特色的云集成商',
        describe:
          '对于软通动力而言，云业务是现在大力投入的业务领域，更是为了给客户提供优质服务所必须的能力。',
        type: 'one',
      },
      {
        img: require('./img/Group 4 (1).png'),
        title: '【观察】重塑中国云MSP市场格局，软通动力的升势和胜势',
        describe:
          '围绕数据，帮助企业释放数据价值，实现数据与企业业务的紧密融合。',
        type: 'two',
      },
      {
        img: require('./img/Group 4 (2).png'),
        title: '农业产业全链路数字化升级助力乡村振兴',
        describe:
          '推动农业生产智能化、经营网络化、管理数据化、服务在线化，实现农业产业高质量发展',
        type: 'three',
      },
    ]
    setData(data)
    var data2 = [
      {
        img: require(`../../assets/ic_home_card1.png`),
        title: '农业产业全链路数字化解决方案',
        describe:
          '面向区域政府、现代农业园区、规模化农场、养殖场等主体的业务需求，整合IoT、大数据、云计算、微服务等能力，提供全链路数字化解决方案，实现数智化生产，提升数据化运营能力，帮助政府洞察农业产业发展，实现产业数字化服务和乡村智治；助力园区、农场生产经营的电子化、数字化，推动现代农业创新发展。',
        path: 'agriculture',
      },
      {
        img: require(`../../assets/ic_home_card2.png`),
        title: '智慧政务大数据解决方案',
        describe:
          `内容：面向政府管理、政府决策、公共服务、平安城市、信息服务五个业务范畴，深度应用大数据、IOT、云计算、AI多种能力，以前端一体化、流程一体化、监管一体化、数据资源一体化的设计理念，建设一体化智能化公共数据平台，实现多部委，全方位数据共享，提高决策的科学性和精准性、预测预警能力以及应急响应能力，节约决策的成本；实现立体化、多层次、全方位的电子政务公共服务体系；实现统一协调的管理信息整合，发挥城市网格化管理效用，达到最大程度的共享应用，以提升城市和社区的服务质量、提高服务能力，
          使城市管理工作和社区服务水平迈上更高的台阶。`,
        path: 'government',
      },
      {
        img: require(`../../assets/ic_home_card3.png`),
        title: '新零售大数据解决方案',
        describe:
          `内容：为企业提供全链路的数据采集及数据应用的解决方案。基于云能力和双中台体系打通线上线下全渠道数据和营销业务，同时连通需求侧与供给侧，帮助企业多渠道打通商品、会员、库存等各类数据，并统一线上线下营销活动，其对用户进行精准营销、个性化推荐服务，提升用户的转化和复购，提升企业运作效率，实现全渠道的智能营销、精准营销。`,
        path: 'retail',
      },
    ]
    setData2(data2)
  }, []);

  return (
    <div className={styles.pageRoot}>
      <Helmet>
        <title>首页</title>
      </Helmet>
      <div>
        {/* 首页 */}
        <img src={require(`../../assets/home_banner.png`)} alt='banner' className={styles.banner} />
        <div className={styles.transformation}>
          <p className={styles.tit}>Landing Digital Transformation</p>
          <h2>从蓝图到落地</h2>
          <h2>旭天云都能助您</h2>
          <h2 style={{ color: '#D42A2D' }}>一臂之力！</h2>
          <div className={styles.info}>
            <p>云管理服务（MSP｜数字中台｜云原生应用｜人工智能</p>
            <p>智能制造 | 新零售 | 数字政务 | 交通与物流 | 智慧农业) </p>
          </div>
          <div className={styles.btn_more}>了解更多</div>
          {data2.map((item, index) => {
            return (
              <div className={styles.plan} key={index}>
                <img src={item.img} />
                <div>
                  <h4>{item.title}</h4>
                  <span className={styles.a}>{item.describe}</span>
                  <p onClick={()=>{history.push(`/solution/case?type=${item.path}`)}}>了解更多 &gt;</p>
                </div>
              </div>
            )
          })}

          {/* <div className={styles.plan}>
            <img src={require(`../../assets/ic_home_card2.png`)} alt='card2' />
            <div>
              <h4>企业集团资金管理服务解决方案</h4>
              <span>该解决方案针对大、中型企业，构建集团资金管理服务体系，实现多银行账户统一平台管理，适应多行业个性需求，可满…</span>
              <p>了解更多 &gt;</p>
            </div>
          </div>
          <div className={styles.plan}>
            <img src={require(`../../assets/ic_home_card3.png`)} alt='card3' />
            <div>
              <h4>基于银行全面决策的绩效考核解决方案</h4>
              <span>该解决方案针对大型企业集团财务公司和结算中心的业务需求，根据行业服务经验，引入金融管理理念，形成了全球化…</span>
              <p>了解更多 &gt;</p>
            </div>
          </div> */}
          {/* 蜂启录 */}
          <p className={styles.revelation}>Revelation</p>
          <h3>蜂启录</h3>
          {data.map((item, index) => {
            return (
              <div className={styles.revelation_box} key={index}>
                <p>{item.title}</p>
                {/* <div className={styles.img}></div> */}
                <img src={item.img} className={styles.img} />
                <span>{item.describe}</span>
                <div className={styles.read_all} onClick={() => { history.push(`/journal/information?type=${item.type}`) }}>阅读全文</div>
              </div>
            )
          })}
        </div>
      </div>
    </div>
  );
}
